<template>
    <div>
        <mj-title type="h2" title="Checkbox 复选框"></mj-title>
        <div class="page-desc">基本组件-多选框。主要用于一组可选项多项选择，或者单独用于标记切换某种状态。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <p><mj-checkbox v-model="checkbox1">选项1</mj-checkbox> {{checkbox1}} </p>
                <p><mj-checkbox v-model="checkbox2">选项2</mj-checkbox> {{checkbox2}}</p>
                <p><mj-checkbox v-model="checkbox3">选项3</mj-checkbox> {{checkbox3}}（v-model的值只要为true都会是勾选状态）</p>
                <p>&nbsp;</p>
                <p>选中时返回指定值（v-model=value或是value存在于v-model数组中，即选中状态）</p>
                <p><mj-checkbox v-model="checkbox4" value="4">选项4</mj-checkbox> {{checkbox4}}</p>
                <p><mj-checkbox v-model="checkbox5" value="5">选项5</mj-checkbox> {{checkbox5}}</p>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                <code class="language-html line-numbers">
                    &lt;template>
                        &lt;p>&lt;mj-checkbox v-model="checkbox1">选项1&lt;/mj-checkbox> {{checkbox1}} &lt;/p>
                        &lt;p>&lt;mj-checkbox v-model="checkbox2">选项2&lt;/mj-checkbox> {{checkbox2}}&lt;/p>
                        &lt;p>&lt;mj-checkbox v-model="checkbox3">选项3&lt;/mj-checkbox> {{checkbox3}}（v-model的值只要为true都会是勾选状态）&lt;/p>
                        &lt;p>&nbsp;&lt;/p>
                        &lt;p>选中时返回指定值（v-model=value或是value存在于v-model数组中，即选中状态）&lt;/p>
                        &lt;p>&lt;mj-checkbox v-model="checkbox4" value="4">选项4&lt;/mj-checkbox> {checkbox4}&lt;/p>
                        &lt;p>&lt;mj-checkbox v-model="checkbox5" value="5">选项5&lt;/mj-checkbox> {checkbox5}&lt;/p>
                    &lt;/template>
                    &lt;script>
                    export default {
                        data () {
                            return {
                                checkbox1: true,
                                checkbox2: false,
                                checkbox3: '1',
                                checkbox4: ['4'],
                                checkbox5: '',
                            }
                        }
                    }
                    &lt;/script>
                </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="禁用状态"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <p><mj-checkbox v-model="checkbox6" :disabled="true">选项1</mj-checkbox> {{checkbox6}}</p>
                <p><mj-checkbox v-model="checkbox7" :disabled="true">选项2</mj-checkbox> {{checkbox7}}</p>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                          &lt;div>
                            &lt;p>&lt;mj-checkbox v-model="checkbox6" :disabled="true">选项1&lt;/mj-checkbox> {{checkbox6}}&lt;/p>
                            &lt;p>&lt;mj-checkbox v-model="checkbox7" :disabled="true">选项2&lt;/mj-checkbox> {{checkbox7}}&lt;/p>
                          &lt;/div>
                        &lt;/template>
                        &lt;script>
                        export default {
                          data(){
                            return {
                              checkbox6:true,
                              checkbox7:false
                            }
                          }
                        }
                        &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="多选框组"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <p>已选值：{{checkbox8}}</p>
                <p><mj-checkbox-group v-model="checkbox8" :data="groupData"></mj-checkbox-group></p>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            &lt;mj-checkbox-group v-model="checkbox8" :data="groupData">&lt;/mj-checkbox-group>
                        &lt;/template>
                        &lt;script>
                        export default {
                          data () {
                            return {
                              checkbox8: ['a1', 'a6'],
                              groupData: [
                                {label: '选项1', value: 'a1'},
                                {label: '选项2', value: 'a2'},
                                {label: '选项3', value: 'a3'},
                                {value: 'a4'},
                                {label: '禁用', value: 'a5', disabled: true},
                                {label: '勾选禁用', value: 'a6', disabled: true}
                              ]
                            }
                          }
                        }
                        &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="可选项目数量的限制"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <p>已选值：{{checkbox9}}</p>
                <p><mj-checkbox-group v-model="checkbox9" :data="groupData" :min="2" :max="4" ></mj-checkbox-group></p>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                            &lt;mj-checkbox-group v-model="checkbox9" :data="groupData" :min="2" :max="4" >&lt;/mj-checkbox-group>
                        &lt;/template>
                        &lt;script>
                        export default {
                          data () {
                            return {
                              checkbox9: ['a5'],
                              groupData: [
                                {label: '选项1', value: 'a1'},
                                {label: '选项2', value: 'a2'},
                                {label: '选项3', value: 'a3'},
                                {value: 'a4'},
                                {label: '禁用', value: 'a5', disabled: true},
                                {label: '勾选禁用', value: 'a6', disabled: true}
                              ]
                            }
                          }
                        }
                        &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="组全选或全不选方法"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <p>已选值：{{checkbox11}}</p>
                <p><mj-checkbox-group v-model="checkbox11" :data="groupData" ref="checkGroup"></mj-checkbox-group></p>
                <p class="mt10">
                  <mj-button type="primary" @click="$refs.checkGroup.toggleSelect(true)">全选</mj-button> 
                  <mj-button type="primary" @click="$refs.checkGroup.toggleSelect(false)">全不选</mj-button>
                  <mj-button type="primary" @click="getValue">获取值</mj-button>
                </p>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                          &lt;div>
                            &lt;p>&lt;mj-checkbox-group v-model="checkbox11" :data="groupData" ref="checkGroup">&lt;/mj-checkbox-group>&lt;/p>
                            &lt;p>
                              &lt;mj-button @click="$refs.checkGroup.toggleSelect(true)">全选&lt;/mj-button> 
                              &lt;mj-button @click="$refs.checkGroup.toggleSelect(false)">全不选&lt;/mj-button>
                              &lt;mj-button @click="getValue">获取值&lt;/mj-button>
                            &lt;/p>
                          &lt;/div>
                        &lt;/template>
                        &lt;script>
                        export default {
                          data () {
                            return {
                              checkbox11: [],
                              groupData: [
                                {label: '选项1', value: 'a1'},
                                {label: '选项2', value: 'a2'},
                                {label: '选项3', value: 'a3'},
                                {value: 'a4'},
                                {label: '禁用', value: 'a5', disabled: true},
                                {label: '勾选禁用', value: 'a6', disabled: true}
                              ]
                            }
                          },
                          methods: {
                            getValue(){
                              console.log(this.$refs.checkGroup.getValue())
                            }
                          }
                        }
                        &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="多个单一组成的组"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <p>当前选中值：{{checkbox12}}</p>

                <mj-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</mj-checkbox>
                <div class="demo-checkall">
                    <mj-checkbox-group v-model="checkbox12" :data="groupData2" @change="handleCheckedCitiesChange"></mj-checkbox-group>
                </div>
                <p class="mt10">
                    <mj-button type="primary" @click="handleCheckAll(true)">全选</mj-button> 
                    <mj-button type="primary" @click="handleCheckAll(false)">全不选</mj-button>
                </p>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                        &lt;template>
                      &lt;div>
                        &lt;p>当前选中值：{{checkbox10}}&lt;/p>
                        &lt;p>&lt;mj-checkbox v-model="checkbox10" value="a1">选项1&lt;/mj-checkbox>&lt;/p>
                        &lt;p>&lt;mj-checkbox v-model="checkbox10" value="a2">选项2&lt;/mj-checkbox>&lt;/p>
                        &lt;p>&lt;mj-checkbox v-model="checkbox10" value="a3">选项3&lt;/mj-checkbox>&lt;/p>
                        &lt;p>&lt;mj-checkbox v-model="checkbox10" value="a4">选项4&lt;/mj-checkbox>&lt;/p>
                        &lt;p>&lt;mj-button @click="checkbox10=['a1','a2','a3','a4']">全选&lt;/mj-button> 
                        &lt;mj-button @click="checkbox10=[]">全不选&lt;/mj-button>&lt;/p>
                      &lt;/div>
                    &lt;/template>
                    &lt;script>
                    export default {
                      data(){
                        return {
                          checkbox10: [],
                        }
                      }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Checkbox 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>v-model</td>
                    <td>绑定值</td>
                    <td>string / number / boolean</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>label</td>
                    <td>当前项名称</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用当前项</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>indeterminate</td>
                    <td>设置 indeterminate 状态，配合多选框组使用</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
            </tbody>
        </table>
		
        <mj-title type="h6" title="Checkbox 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>选中事件</td>
                    <td>value</td>
                </tr>
            </tbody>
        </table>

       <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Checkbox Group 参数"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>v-model</td>
                    <td>多选框组已选数组</td>
                    <td>Array</td>
                    <td>[]</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Checkbox Group 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>多选框组返回已选数组</td>
                    <td>[]</td>
                </tr>
            </tbody>
        </table>
	</div>
</template>

<script>
export default {
  data () {
    return {
      checkbox1: true,
      checkbox2: false,
      checkbox3: '1',
      checkbox4: ['4'],
      checkbox5: '',
      checkbox6: true,
      checkbox7: false,
      checkbox8: ['a1', 'a6'],
      checkbox9: ['a5'],
      checkbox10: [],
      checkbox11: ['a2','a6'],
      checkbox12: [],
      checkAll:false,
      isIndeterminate: false,
      groupData: [
        {label: '选项1', value: 'a1'},
        {label: '选项2', value: 'a2' , class: 'cla'},
        {label: '选项3', value: 'a3'},
        {value: 'a4'},
        {label: '禁用', value: 'a5', disabled: true},
        {label: '勾选禁用', value: 'a6', disabled: true}
      ],
      groupData2: [
        {label: '司马懿', value: 'a1'},
        {label: '荀彧', value: 'a2'},
        {label: '郭嘉', value: 'a3'},
        {label: '贾诩', value: 'a4'},
      ]
    }
  },
  methods: {
    _chagen11(){
      console.log('ff')
    },
    getValue(){
      console.log(this.$refs.checkGroup.getValue())
    },
    handleCheckAllChange(val) {
        val ? this.checkbox12=['a1','a2','a3','a4'] : this.checkbox12=[];
        this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
        console.log(value)
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.groupData2.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.groupData2.length;
    },
    handleCheckAll(boolean) {
        if(boolean){
            this.checkbox12=['a1','a2','a3','a4']
            this.checkAll=true
            this.isIndeterminate=false
        }else{
            this.checkbox12=[]
            this.checkAll=false
            this.isIndeterminate=false 
        }
    }
  }
}
</script>

<style scoped>
.demo-checkall .mj-checkbox-group /deep/ .mj-checkbox {margin-right: 30px;}
</style>